<template>
  <div class="app-icon" :style="{ backgroundImage: imgUrl, width, height }" @click="$emit('click')"></div>
</template>

<script>
import loadIcons from '@/components/app-icon/loadIcons'
export default {
  name: 'AppIcon',
  props: {
    name: String,
    width: String,
    height: String
  },
  data() {
    return {
      imgUrl: '', // 显示的图标地址
      iconMapList: loadIcons // 图片列表
    }
  },
  methods: {
    // 找到图标地址
    findIcon(name) {
      this.imgUrl = `url(${this.iconMapList[name]})`
    }
  },
  created() {
    this.findIcon(this.name)
  }
}
</script>

<style lang="less" scoped>
.app-icon {
  position: relative;
  background-size: 100% 100%;
}
</style>
